<?php include('includes/code/common.php'); ?>
<!doctype html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <title>Samples - Rich Text Editor</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="robots" content="index,follow"/>
    <meta http-equiv="expires" content="0"/>
    <link rel="stylesheet" type="text/css" href="includes/css/yui_3.0.0_reset-min.css" />
    <link id="mainCss" href="includes/css/main.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="includes/css/print.css" rel="stylesheet" type="text/css" media="print" />
    <link href="includes/css/template/sample.css" rel="stylesheet" type="text/css" media="screen" />
    <!--Markitup-->
    <link href="includes/css/template/markitup/skins/markitup/style.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="includes/css/template/markitup/sets/html/style.css" rel="stylesheet" type="text/css" media="screen" />

    <script type="text/javascript" src="includes/javascript/jquery-1.6.1.min.js"></script>
    <!-- WYM Editor -->
    <script type="text/javascript" src="includes/javascript/template/wymeditor/jquery.wymeditor.js"></script>
    <script type="text/javascript" src="includes/javascript/template/wymeditor/plugins/resizable/jquery.wymeditor.resizable.js"></script>
    <script type="text/javascript" src="includes/javascript/template/wymeditor/plugins/hovertools/jquery.wymeditor.hovertools.js"></script>
    <!-- Markitup -->
    <script type="text/javascript" src="includes/javascript/template/jquery.markitup-1.1.10.js"></script>
    <script type="text/javascript" src="includes/css/template/markitup/sets/html/set.js"></script>
    <script type="text/javascript">
      $(function(){
        $("#textarea1Container").hide();
        WYMeditor.PREVIEW_CSS = $('link#mainCss').attr("href");
        var editor = $('.wymeditor').wymeditor({
          html: '<p>Start typing...<\/p>',
          logoHtml : "",
          stylesheet : "includes/css/template/wymeditor.css",
          previewCss : "includes/css/template/sample.css",
          postInit: function(wym) {
            //render the containers box as a panel
            //and remove the span containing the '>'
            $(wym._box).find(wym._options.containersSelector)
            .removeClass('wym_dropdown')
            .addClass('wym_panel')
            .find('h2 > span')
            .remove();
            wym.hovertools();
            //This line of code removes the classes container
            $(wym._box).find('div.wym_classes').remove();
            $("#textarea1Container").show();
          }
          //This indicates which custom classes are to be shown
          //If this is removed and a stylesheet is added, all the styles will be included
          /* ,
          classesItems: [
            {'name': 'date', 'title': 'PARA: Date1', 'expr': 'p'},
            {'name': 'hidden-note', 'title': 'PARA: Hidden note', 'expr': 'p[@class!="important"]'}
          ]*/
        });


        $("#textarea1Btn").click(function(){
          if(console) {
            console.log($.wymeditors(0).xhtml());
          }
          return false;
        });

        $("#textarea1CancelBtn").click(function(){
          console.log($.wymeditors(0).html(""));
          return false;
        });

        //Markitup
        $("#markitupHtml").markItUp(mySettings);

        $("#textarea2Btn").click(function(){
          if(console) {
            console.log($("#markitupHtml").val());
          }
          return false;
        });

        $("#textarea2CancelBtn").click(function(){
          $("#markitupHtml").val("");
          return false;
        });


      });
    </script>

  </head>

  <?php
  //top navigation selected
  $topNavSelected = "samples";
  ?>

  <?php
  //right navigation selected
  $rightNavSelected = "richTextEditor";
  ?>

  <body>

    <!-- Container -->
    <div id="container">

      <!-- Header -->
      <div id="header" title="Treadstone Web Services">
        <?php include('includes/headerContent.php') ?>

      </div>

      <div class="clear"></div>

      <!-- Body -->
      <div id="bodyContent">

        <!-- Breadcrumbs -->
        <div id="breadcrumbs">
          <ul>
            <li class="link"><a href="index.php" title="Home">Home</a></li>
            <li class="link"><a href="samples.php" title="Samples">Samples</a></li>
            <li>Rich Text Editor</li>
          </ul>
        </div>
        <!-- End Breadcrumbs -->

        <div id="content">

          <div class="sectionLeft">
            <form action="#" method="post">
              <h1>WYM Editor - WYSIWYM (What you see is what you mean) XHTML Editor</h1>
              <p><a href="http://www.wymeditor.org">WYM Editor</a></p>

              <div id="textarea1Container">
                <textarea id="textarea1" class="wymeditor"></textarea>
              </div>
              <button id="textarea1Btn" name="textarea1Btn">Submit</button>
              <button id="textarea1CancelBtn" name="textarea1CancelBtn">Cancel</button>

              <h1>Mark it up - Advanced HTML Editor</h1>
              <p><a href="http://markitup.jaysalvat.com/examples/html/">MarkItUp Editor</a></p>
              <textarea id="markitupHtml" name="markitupHtml" cols="80" rows="20"></textarea>
              <button id="textarea2Btn" name="textarea2Btn">Submit</button>
              <button id="textarea2CancelBtn" name="textarea2CancelBtn">Cancel</button>
            </form>
          </div>
          <!--   end #sectionLeft-->

        <!-- Right Navigation -->
        <div id="sidebar">
          <?php include('includes/rightNavSamples.php') ?>
        </div>
        <!-- end Right Navigation -->

        </div>
        <!-- end #content -->




      </div>
      <!-- end #bodyContent -->
      <!-- End Body -->

      <!-- Footer -->
      <div id="footer">
        <?php include('includes/footer.php') ?>
      </div>
      <!-- End Footer -->
    </div>
    <!-- End Container -->
  </body>
</html>
